<template>
	<view class="container">
		<view class="formBox">
			<u--form labelPosition="top" labelWidth="auto" :model="model" :rules="rules" ref="form">
				<u-form-item label="意见标题:" prop="title" borderBottom>
					<u--input v-model="model.title" placeholder="请输入意见标题" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="phonenumber" borderBottom>
					<u--input v-model="model.phonenumber" placeholder="请输入联系电话" border="none"></u--input>
				</u-form-item>
				<u-form-item label="意见内容:" prop="content">
					<u--textarea v-model="model.content" placeholder="请输入意见内容" height="200" ></u--textarea>
				</u-form-item>
				
			</u--form>
			<u-gap height="64"></u-gap>
			<u-button type="primary" text="提交" @click="submit"></u-button>
			<!-- <u-gap height="32"></u-gap>
			<u-button type="error " text="重置" @click="reset"></u-button> -->
			<u-gap height="16"></u-gap>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		name: '',
		components: {},
		data() {
			return {
				id:null,
				editId:null,
				model: {
					title: null, //标题
					phonenumber: null, //联系电话
					content: null, //意见内容
				},
				rules: {
					title: [{
						type: 'string',
						required: true,
						message: '意见标题不能为空',
						trigger: ['blur', 'change']
					}],
					phonenumber: [{
						type: 'string',
						required: true,
						message: '联系电话不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^((\+|00)86)?1[3-9]\d{9}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确手机号'
					}],
					content: [{
						type: 'string',
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(option){
			if(option.id!=undefined){
				this.id=option.id
			}
		},
		created() {
			if(this.id!=null){
				this.getDetails()
			}
		},
		mounted() {},
		destroyed() {},
		methods: {
			// 回显数据
			getDetails(){
				let data={
					id:this.id
				}
				api.getFeedbackDetails(data).then(res=>{
					if(res.data.code==200){
						let obj = res.data.data
						this.model.title = obj.title
						this.model.phonenumber = obj.phonenumber
						this.model.content = obj.content
						this.model.id = obj.id
						this.editId = obj.id
					}
				})
			},
			// 重置数据
			// reset(){
			// 	this.model.title = null
			// 	this.model.phonenumber = null
			// 	this.model.content = null
			// },
			// 点击提交
			submit() {
				const that=this;
				that.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					if(this.id==null){
						// 新增
						let userInfo = uni.getStorageSync('userInfo')
						let data={
							title:this.model.title,
							phonenumber:this.model.phonenumber,
							content:this.model.content,
							userId: userInfo.id
						}
						api.addFeedback(data).then(res=>{
							console.log('添加',res)
							if(res.data.code==200){
								uni.$u.route({
									type:"navigateBack",
									url: "/pages/feedback/list"
								});
							}
						})
						
					}else{
						// 修改
						let userInfo = uni.getStorageSync('userInfo')
						let data={
							title:this.model.title,
							phonenumber:this.model.phonenumber,
							content:this.model.content,
							id:this.editId,
							userId: userInfo.id
						}
						api.editFeedback(data).then(res=>{
							console.log('修改',res)
							if(res.data.code==200){
								uni.$u.route({
									type:"navigateBack",
									url: "/pages/feedback/list"
								});
							}
						})
					}
				}).catch(errors => {
					uni.$u.toast('请按要求填写')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 32rpx);
		padding: 0 16rpx;
	}

	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
	}
</style>
